<!doctype html>
<html>
 <head lang="en">
  <meta charset="UTF-8">
  <title>仿京东左侧菜单</title>
  <link href="css/style.css" rel="stylesheet"/>
 </head>
 <body>
	<div class="nav-box">
		<div class="nav-top"><a href="">全部商品分类</a></div>
		<ul>
			<li>
				<a href="">家用电器</a>
				<div>
					<img src="images/erji.jpg"/>
				</div>
			</li>
			<li>
				<a href="">手机</a>、<a href="">数码</a>、<a href="">京东通信</a><div><img src="images/erji1.jpg"/></div>
			</li>
			<li>
				<a href="">电脑</a>、<a href="">办公</a><div><img src="images/erji2.jpg"/></div>
			</li>
			<li>
				<a href="">家居</a>、<a href="">家具</a>、<a href="">家装</a>、<a href="">厨具</a><div><img src="images/erji3.jpg"/></div>
			</li>
			<li>
				<a href="">男装</a>、<a href="">女装</a>、<a href="">珠宝</a><div><img src="images/erji4.jpg"/></div>
			</li>
		</ul>
	</div>
	<script src="./js/jquery-1.12.4.js"></script>
	<script>
		$(function(){
			$("li").hover(
				function(){
					// $(this) 代表光标移入的那一个li元素
					// find()  查找内部元素
					$(this).find("div").show();
					//$(this).addClass("orange"); // 添加样式

					//方式二
					$(this).toggleClass("orange");
				},
				function(){
					$(this).find("div").hide();
					//$(this).removeClass("orange"); //移出样式

					//方式二
					$(this).toggleClass("orange");
				}
			);
		})
	</script>
 </body>
</html>
